<template>
    <div class="template-list">
        <div class="template-list__header">
            <el-input
                v-model="searchQuery"
                placeholder="搜索模板..."
                class="search-input"
                @input="handleSearch"
            >
                <template #prefix>
                    <el-icon><Search /></el-icon>
                </template>
            </el-input>
            <el-select v-model="selectedCategory" placeholder="选择分类" @change="handleFilter">
                <el-option label="全部" value="" />
                <el-option label="人像" value="portrait" />
                <el-option label="风景" value="landscape" />
                <el-option label="动漫" value="anime" />
                <el-option label="其他" value="other" />
            </el-select>
        </div>

        <el-row :gutter="20" class="template-grid">
            <el-col
                v-for="template in filteredTemplates"
                :key="template.id"
                :xs="24"
                :sm="12"
                :md="8"
                :lg="6"
            >
                <el-card class="template-card" :body-style="{ padding: '0px' }">
                    <el-image
                        :src="template.thumbnail"
                        class="template-image"
                        fit="cover"
                        loading="lazy"
                    />
                    <div class="template-info">
                        <h3>{{ template.name }}</h3>
                        <p>{{ template.description }}</p>
                        <div class="template-stats">
                            <span>
                                <el-icon><View /></el-icon>
                                {{ template.stats.views }}
                            </span>
                            <span>
                                <el-icon><Star /></el-icon>
                                {{ template.stats.likes }}
                            </span>
                            <span>
                                <el-icon><Download /></el-icon>
                                {{ template.stats.uses }}
                            </span>
                        </div>
                        <div class="template-tags">
                            <el-tag
                                v-for="tag in template.tags"
                                :key="tag"
                                size="small"
                                class="tag"
                            >
                                {{ tag }}
                            </el-tag>
                        </div>
                        <el-button type="primary" @click="handleGenerate(template)">
                            一键生成
                        </el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <div v-if="loading" class="loading-wrapper">
            <el-skeleton :rows="3" animated />
        </div>

        <el-empty v-if="!loading && filteredTemplates.length === 0" description="暂无模板" />
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Search, View, Star, Download } from '@element-plus/icons-vue';
import type { WorkflowTemplate } from '@/types';

const props = defineProps<{
    templates: WorkflowTemplate[];
    loading?: boolean;
}>();

const router = useRouter();
const searchQuery = ref('');
const selectedCategory = ref('');

const filteredTemplates = computed(() => {
    let result = props.templates;
    
    if (selectedCategory.value) {
        result = result.filter(t => t.category === selectedCategory.value);
    }
    
    if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase();
        result = result.filter(t => 
            t.name.toLowerCase().includes(query) ||
            t.description.toLowerCase().includes(query) ||
            t.tags.some(tag => tag.toLowerCase().includes(query))
        );
    }
    
    return result;
});

const handleSearch = () => {
    // 可以添加防抖
};

const handleFilter = () => {
    // 可以添加额外的过滤逻辑
};

const handleGenerate = (template: WorkflowTemplate) => {
    router.push({
        name: 'generate',
        params: { id: template.id }
    });
};
</script>

<style lang="scss" scoped>
.template-list {
    padding: 20px;

    &__header {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;

        .search-input {
            width: 300px;
        }
    }

    .template-grid {
        margin-bottom: 20px;
    }

    .template-card {
        margin-bottom: 20px;
        transition: transform 0.3s;

        &:hover {
            transform: translateY(-5px);
        }

        .template-image {
            width: 100%;
            height: 200px;
        }

        .template-info {
            padding: 15px;

            h3 {
                margin: 0 0 10px;
                font-size: 16px;
            }

            p {
                margin: 0 0 10px;
                color: #666;
                font-size: 14px;
            }
        }

        .template-stats {
            display: flex;
            gap: 15px;
            margin-bottom: 10px;
            color: #666;

            span {
                display: flex;
                align-items: center;
                gap: 4px;
            }
        }

        .template-tags {
            margin-bottom: 15px;

            .tag {
                margin-right: 5px;
                margin-bottom: 5px;
            }
        }
    }

    .loading-wrapper {
        padding: 20px;
    }
}
</style> 